@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        body {
            padding: 0;
            margin: 0;
            background: #ffffff;
        }

        html {
            padding: 0;
            margin: 0;
            background: #ffffff;
        }
    </style>
}
<div class="container py-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h4 class="m-0 p-0">
                <span>在线课程</span>
                <span class="text-success" v-if="courseInfo.state">（{{ courseInfo.stateStr }}）</span>
                <span class="text-warning" v-else>（{{ courseInfo.stateStr }}）</span>
            </h4>
        </div>
        <div class="d-flex">
            <div>
                <el-tooltip content="收藏/取消收藏" placement="left">
                    <button type="button" class="btn btn-icon" v-on:click="btnCollectionClick">
                        <i class="bi bi-person-hearts text-warning" v-if="courseUser.collection"></i>
                        <i class="bi bi-heart" v-else></i>
                    </button>
                </el-tooltip>
            </div>
            <button type="button" class="btn px-5 rounded-pill btn-outline-dark" v-on:click="utils.closeLayerSelf">
                <i class="bi bi-arrow-left me-3"></i>返 回
            </button>
        </div>
    </div>
</div>
<div class="py-8 bg-cover bg-primary" :style="{'background-image':'url('+(bgImgUrl)+')'}">
    <div class="container">
        <h1 class="text-white display-4 mb-0">{{ courseInfo.name }}</h1>
    </div>
</div>
<div class="py-6">
    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="mb-4 position-relative">
                    <div id="videoPlayer"></div>
                    <div class="position-absolute top-0 start-100 translate-middle z-2">
                        <img width="138" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="courseInfo.courseUserInfo.state==='Xuexizhong'" />
                        <img width="138" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="courseInfo.courseUserInfo.state==='Yiwancheng'" />
                    </div>
                </div>
                <div class="card mb-4 rounded-0">
                    <div class="card-header">
                        <h4 class="mb-0">课程介绍</h4>
                    </div>
                    <div class="card-body">
                        <p v-html="courseInfo.description"></p>
                    </div>
                </div>
                <div class="card mb-4 rounded-0">
                    <div class="card-header">
                        <h4 class="mb-0">课程评价</h4>
                    </div>
                    <div class="card-body">
                        <div v-if="eUser>0">
                            <div class="mb-3">
                                <h3 class="mb-4">{{ eUser }} 名学员评价了课程</h3>
                                <div class="row align-items-center">
                                    <div class="col-auto text-center">
                                        <h3 class="display-2 fw-bold">{{ eAvg }}</h3>
                                        <span class="fs-6">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                        </span>
                                        <p class="mb-0 fs-6">({{ eUser }})</p>
                                    </div>
                                    <div class="col order-3 order-md-2">
                                        <div class="progress mb-3" style="height: 6px">
                                            <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[0],eUser)+'%' }" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="progress mb-3" style="height: 6px">
                                            <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[1],eUser)+'%' }" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="progress mb-3" style="height: 6px">
                                            <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[2],eUser)+'%' }" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="progress mb-3" style="height: 6px">
                                            <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[3],eUser)+'%' }" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="progress mb-0" style="height: 6px">
                                            <div class="progress-bar bg-warning" role="progressbar" :style="{ width:utils.formatPercentFloat(eStarList[4],eUser)+'%' }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-auto col-6 order-2 order-md-3">
                                        <div>
                                            <span class="fs-6 align-top">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                            </span>
                                            <span class="ms-1">{{ utils.formatPercentFloat(eStarList[0],eUser) }}%</span>
                                        </div>
                                        <div>
                                            <span class="fs-6 align-top">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                            </span>
                                            <span class="ms-1">{{ utils.formatPercentFloat(eStarList[1],eUser) }}%</span>
                                        </div>
                                        <div>
                                            <span class="fs-6 align-top">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                            </span>
                                            <span class="ms-1">{{ utils.formatPercentFloat(eStarList[2],eUser) }}%</span>
                                        </div>
                                        <div>
                                            <span class="fs-6 align-top">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                            </span>
                                            <span class="ms-1">{{ utils.formatPercentFloat(eStarList[3],eUser) }}%</span>
                                        </div>
                                        <div>
                                            <span class="fs-6 align-top">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-light" viewBox="0 0 16 16">
                                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                </svg>
                                            </span>
                                            <span class="ms-1">{{ utils.formatPercentFloat(eStarList[4],eUser) }}%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-5">
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center  border-bottom pb-4 mb-4" v-for="eItem in eList">
                                    <div class="d-flex align-items-start">
                                        <img :src="eItem.avatarUrl || DEFAULT_AVATAR_URL" alt="" class="rounded-circle avatar-lg">
                                        <div class="ms-3">
                                            <h4 class="mb-1">
                                                {{ eItem.displayName }}
                                            </h4>
                                            <div class="mb-2">
                                                <span class="fs-6">
                                                    <el-rate v-model="eItem.star"
                                                             disabled
                                                             show-score
                                                             :max="eItem.maxStar"
                                                             text-color="#ff9900">
                                                    </el-rate>
                                                </span>
                                            </div>
                                            <p>{{ eItem.textContent }}</p>
                                        </div>
                                    </div>
                                    <span class="fs-6">{{ utils.getFriendlyDateTime(eItem.starDateTime) }}</span>
                                </div>
                                <div class="mt-5 text-center">
                                    <el-button icon="el-icon-refresh-right" v-if="eList.length>0 && eList.length<eTotal" v-on:click="btnLoadMoreEvaluationClick" :loading="eLoadMoreLoading">加载更多</el-button>
                                    <small v-else>没有更多了</small>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <el-empty description="暂无评价"></el-empty>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card mb-4 rounded-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-transparent" v-if="courseInfo.state || courseInfo.boolWare">
                            <i class="bi bi-star-fill text-success me-2"></i>
                            课时：{{ courseInfo.studyHour}}<span class="text-success">（已完成课时）</span>
                        </li>
                        <li class="list-group-item bg-transparent" v-else>
                            <i class="bi bi-star-fill text-warning me-2"></i>
                            课时：{{ courseInfo.studyHour}}（{{ utils.formatDuration(courseUser.totalDuration) }}/{{ utils.formatDuration(courseInfo.duration) }}）
                        </li>
                        <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                            <i class="bi bi-star-fill text-success me-2"></i>
                            已获得学分：{{ courseInfo.credit}}
                        </li>
                        <li class="list-group-item bg-transparent" v-else>
                            <i class="bi bi-star-fill text-warning me-2"></i>
                            学分：{{ courseInfo.credit}}（完成课程可以获得）
                        </li>
                    </ul>
                </div>
                <div class="card rounded-0" id="courseAccordion">
                    <div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item p-0 bg-transparent">
                                <a class="h4 mb-0 d-flex align-items-center py-3 px-4" data-bs-toggle="collapse" href="#courseTwo" role="button" aria-expanded="false" aria-controls="courseTwo">
                                    <div class="me-auto">
                                        学习进度
                                        <p class="mb-2 fs-6 mt-1 fw-normal">{{ courseInfo.wareOverTotal }}/{{ courseInfo.wareTotal }} 章节</p>
                                        <p class="mb-0 fs-6 mt-1 fw-normal">{{ utils.formatDuration(courseUser.totalDuration) }}/{{ utils.formatDuration(courseInfo.duration) }} 学时</p>
                                    </div>
                                    <span class="chevron-arrow ms-4">
                                        <i class="bi bi-check-circle-fill fs-4 text-success" v-if="courseInfo.state"></i>
                                        <i class="bi bi-check-circle-fill fs-4" v-else></i>
                                    </span>
                                </a>
                                <div class="collapse show" id="courseTwo" data-bs-parent="#courseAccordion">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="text-center">
                                                <div class="mb-3">
                                                    <el-progress type="circle" :stroke-width="12" :percentage="utils.formatPercentFloat(courseInfo.wareOverTotal,courseInfo.wareTotal)" status="success"></el-progress>
                                                </div>
                                                <div class="mb-3 text-center">
                                                    <span v-if="courseInfo.state" class="text-success">{{ courseInfo.stateStrMsg }}</span>
                                                    <span v-else class="text-warning">{{ courseInfo.stateStrMsg }}</span>
                                                </div>
                                                <small>{{ utils.formatPercentFloat(courseInfo.wareOverTotal,courseInfo.wareTotal) }}%</small>
                                            </div>
                                        </li>
                                        <li class="list-group-item" v-for="ware in courseWareList">
                                            <a href="javascript:;" class="d-flex justify-content-between align-items-center" v-on:click="btnPlayWare(ware)">
                                                <div>
                                                    <img v-if="ware.id===courseWareCurrent.id && playing" src="/sitefiles//assets/images/ing.gif" />
                                                    <i v-else-if="ware.state==='Yiwancheng'" class="bi bi-check-circle-fill me-2 text-success"></i>
                                                    <i v-else class="bi bi-play-fill me-2"></i>
                                                    <span>
                                                        {{ ware.courseWareInfo.fileName }}
                                                    </span>
                                                </div>
                                                <div>
                                                    <span>{{ utils.formatDuration(ware.courseWareInfo.duration) }}</span>
                                                </div>
                                            </a>
                                            <div class="mt-2">
                                                <small>{{ utils.formatDuration(ware.totalDuration) }}</small>
                                                <el-tag v-if="ware.state==='Yiwancheng'" size="mini" type="success">已学完</el-tag>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card rounded-0 mt-4">
                    <div>
                        <div class="card-header">
                            <h4 class="mb-0">完成条件</h4>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                                <span v-if="courseInfo.examId>0">
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    已通过课后考试（{{ courseInfo.maxScore }}）
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后考试
                                </span>
                            </li>
                            <li class="list-group-item bg-transparent" v-else>
                                <span v-if="courseInfo.examId>0">
                                    <span v-if="courseInfo.boolWare">
                                        <span v-if="courseInfo.boolExam">
                                            <i class="bi bi-star-fill text-success me-2"></i>
                                            已通过课后考试（{{ courseInfo.maxScore }}）
                                        </span>
                                        <span v-else>
                                            <i class="bi bi-star-fill text-warning me-2"></i>
                                            <el-link type="warning" v-on:click="btnViewExamClick">前往课后考试</el-link>
                                        </span>
                                    </span>
                                    <span v-else>
                                        <i class="bi bi-star-fill text-warning me-2"></i>
                                        <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后考试</el-link>
                                    </span>
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后考试
                                </span>
                            </li>
                            <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                                <span v-if="courseInfo.examQuestionnaireId>0">
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    已提交课后问卷
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后问卷
                                </span>
                            </li>
                            <li class="list-group-item bg-transparent" v-else>
                                <span v-if="courseInfo.examQuestionnaireId>0">
                                    <span v-if="courseInfo.boolWare">
                                        <span v-if="courseInfo.boolExam">
                                            <span v-if="courseInfo.boolExamQ">
                                                <i class="bi bi-star-fill text-success me-2"></i>
                                                已提交课后问卷
                                            </span>
                                            <span v-else>
                                                <i class="bi bi-star-fill text-warning me-2"></i>
                                                <el-link type="warning" v-on:click="btnViewExamQClick">前往课后问卷</el-link>
                                            </span>
                                        </span>
                                        <span v-else>
                                            <i class="bi bi-star-fill text-warning me-2"></i>
                                            <el-link type="warning" v-on:click="utils.error('请先通过课后考试',{layer:true})">前往课后问卷</el-link>
                                        </span>
                                    </span>
                                    <span v-else>
                                        <i class="bi bi-star-fill text-warning me-2"></i>
                                        <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后问卷</el-link>
                                    </span>
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后问卷
                                </span>
                            </li>
                            <li class="list-group-item bg-transparent" v-if="courseInfo.state">
                                <span v-if="courseInfo.studyCourseEvaluationId>0">
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    已提交评价（{{ courseUser.avgEvaluation }}）
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后评价
                                </span>
                            </li>
                            <li class="list-group-item bg-transparent" v-else>
                                <span v-if="courseInfo.studyCourseEvaluationId>0">
                                    <span v-if="courseInfo.boolWare">
                                        <span v-if="courseInfo.boolExam">
                                            <span v-if="courseInfo.boolEvaluation">
                                                <i class="bi bi-star-fill text-success me-2"></i>
                                                已提交评价（{{ courseUser.avgEvaluation }}）
                                            </span>
                                            <span v-else>
                                                <i class="bi bi-star-fill text-warning me-2"></i>
                                                <el-link type="warning" v-on:click="btnViewEvaluationClick">前往课后评价</el-link>
                                            </span>
                                        </span>
                                        <span v-else>
                                            <i class="bi bi-star-fill text-warning me-2"></i>
                                            <el-link type="warning" v-on:click="utils.error('请先通过课后考试',{layer:true})">前往课后评价</el-link>
                                        </span>
                                    </span>
                                    <span v-else>
                                        <i class="bi bi-star-fill text-warning me-2"></i>
                                        <el-link type="warning" v-on:click="utils.error('请先完成章节学习',{layer:true})">前往课后评价</el-link>
                                    </span>
                                </span>
                                <span v-else>
                                    <i class="bi bi-star-fill text-success me-2"></i>
                                    无课后问卷
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script src="/sitefiles/assets/lib/xgplayer/index.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/geeks/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/study/studyCourseInfo.js" type="text/javascript"></script>
}